<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=320, user-scalable=0"/>
  <meta name="viewport" content="minimum-scale=1, maximum-scale=1"/>
  <style>
body {
margin: 0px;
padding: 0px;
}
#slider {
font: 12pt sans-serif;
list-style-type: none;
margin: 0px;
padding: 0px;
width: 320px;
height: 242px;
background: gray;
overflow: hidden;
position: relative;
}
#slider li {
display: inline;
border: solid 1px;
border-left: solid 10px;
height: 180px;
width: 308px;
margin: 0px;
position: absolute;
background: white;
cursor: move;
}
#slider p {
margin-left: 6px;
font-size: 10pt;
}
h4 {
margin: 0px;
padding: 0px;
border: 0px;
font-size: 14px;
color: white;
}
  </style>
  <script src="ianime028-all.js"></script>
  <script src="islider010.js"></script>
  </script>
</head>
<body onload="iSlider(new iAnime(), { id:'slider', dy:20, dy2:160, effect:'bounce' })">   
  <ul id="slider">
    <li style="border-color:#ff6666">
        <h4 style="background:#ff6666">Advertisement</h4>
        <p><a href="http://www.amazon.co.jp/dp/4873113296?tag=lifeisbeau015-22&camp=243&creative=1615&linkCode=as1&creativeASIN=4873113296&adid=0Y8N3PSAXJNSKPEJHGYF&"><img src="http://images-jp.amazon.com/images/P/0596101996.09.MZZZZZZZ.jpg"/></a></p>
    </li>
    <li style="border-color:#66ffff">
        <h4 style="background:#66ffff">License</h4>
        <p>iSlider.js is provided under MIT license and free to use.</p>
        <p>Enjoy!<br/>
        Satoshi Nakajima</p>
    </li>
    <li style="border-color:#6666ff">
        <h4 style="background:#6666ff">Author</h4>
        <p><img src="http://satoshi.blogs.com/satoshi.jpg" /></p>
        <p>Satoshi Nakajima</p>
    </li>
    <li style="border-color:#66ff66">
        <h4 style="background:#66ff66">iSlider.js</h4>
        <p>iSlider.js is an iAnime.js plug-in that enables "slide" UI. 
           You can stack DOM elements (typically DIVs and LIs) and
           slide them appropriately.</p>
        <p>You can slide them horizontally, vertically or even diagonally.</p>
        <p>You can also specify duration, and an effect such as 'bounce' or 'easein'.</p>
    </li>
  </ul>
</body>
</body>
</html>
